import type {
  TitleOption,
  LegendOption,
  TooltipOption,
  ChartsConfig,
  XAxisOption,
  YAxisOption,
  GridOption,
  DataType,
  DataItem,
} from '../types/charts'
import { isBoolean, deepMerge } from '../utils'
import { defaultConfig } from '../defaultConfig'

// 生成title部分
export const createTitle = (options: ChartsConfig) => {
  let title = {}
  const titleOption = options.title
  if (!titleOption) {
    return title
  }
  let opt: TitleOption = {}
  if (isBoolean(titleOption) && titleOption) {
    opt = deepMerge({}, defaultConfig.title as TitleOption)
  } else {
    opt = deepMerge(defaultConfig.title as TitleOption, titleOption)
  }
  title = {
    text: opt.text || '',
    left: opt.left || 'auto',
    top: opt.top || 'auto',
    right: opt.right || 'auto',
    bottom: opt.bottom || 'auto',
    textStyle: {
      color: opt.color || '#333',
      fontSize: opt.fontSize || 18,
      fontWeight: opt.fontWeight || 'normal',
      fontFamily: opt.fontFamily || 'Arial, sans-serif',
    },
  }
  return title
}
// 生成legend部分
export const createLegend = (options: ChartsConfig) => {
  let legend = {}
  const legendOption = options.legend
  if (!legendOption) {
    return legend
  }
  let opt: LegendOption = {}
  if (isBoolean(legendOption) && legendOption) {
    opt = deepMerge({}, defaultConfig.legend as LegendOption)
  } else {
    opt = deepMerge(defaultConfig.legend as LegendOption, legendOption as LegendOption)
  }

  legend = {
    data: opt.data || [],
    orient: opt.orient || 'horizontal',
    left: opt.left || 'auto',
    right: opt.right || 'auto',
    top: opt.top || 'auto',
    bottom: opt.bottom || 'auto',
    itemWidth: opt.itemWidth || 20,
    itemHeight: opt.itemHeight || 14,
  }

  return legend
}
// 生成tooltip部分
export const createTooltip = (options: ChartsConfig) => {
  let tooltip = {}
  const tooltipOption = options.tooltip
  if (!tooltipOption) {
    return tooltip
  }
  let opt: TooltipOption = {}
  if (isBoolean(tooltipOption) && tooltipOption) {
    opt = deepMerge({}, defaultConfig.tooltip as TooltipOption)
  } else {
    opt = deepMerge(defaultConfig.tooltip as TooltipOption, tooltipOption as TooltipOption)
  }
  tooltip = {
    trigger: opt.trigger || 'item',
    formatter: opt.formatter || '{b}: {c}',
  }
  return tooltip
}

// grid
export const createGrid = (options: ChartsConfig) => {
  let grid = {}
  const gridOption = options.grid || {}
  if (!gridOption) {
    return grid
  }
  const opt: GridOption = deepMerge(defaultConfig.grid as GridOption, gridOption as GridOption)
  grid = {
    top: opt.top || '10%',
    left: opt.left || '3%',
    right: opt.right || '4%',
    bottom: opt.bottom || '3%',
    containLabel: opt.containLabel || true,
  }
  return grid
}

// 生成xAxis部分
export const createXAxis = (options: ChartsConfig, data: DataType) => {
  let xAxis = {}
  const xAxisOption = options.xAxis || {}

  let opt: XAxisOption = {}
  opt = deepMerge(defaultConfig.title as XAxisOption, xAxisOption as XAxisOption)
  xAxis = {
    type: opt.type || 'category',
    data: data.map((item: DataItem) => item.name),
    name: opt.name || '',
    nameLocation: opt.nameLocation || 'end',
    nameTextStyle: {
      color: opt.nameColor || '#666',
    },
    axisLine: {
      lineStyle: {
        color: opt.lineColor || '#666',
      },
    },
    axisLabel: {
      color: opt.lineColor || '#666',
    },
    splitLine: {
      lineStyle: {
        color: opt.splitColor || '#eee',
      },
    },
    boundaryGap: opt.boundaryGap || false,
  }
  return xAxis
}
// 生成yAxis部分
export const createYAxis = (options: ChartsConfig) => {
  let yAxis = {}
  const yAxisOption = options.yAxis || {}
  let opt: YAxisOption = {}
  opt = deepMerge(defaultConfig.title as YAxisOption, yAxisOption as YAxisOption)
  yAxis = {
    type: opt.type || 'value',
    name: opt.name || '',
    nameLocation: opt.nameLocation || 'end',
    nameTextStyle: {
      color: opt.nameColor || '#666',
    },
    axisLine: {
      lineStyle: {
        color: opt.lineColor || '#666',
      },
    },
    axisLabel: {
      color: opt.lineColor || '#666',
    },
    splitLine: {
      lineStyle: {
        color: opt.splitColor || '#eee',
      },
    },
  }

  return yAxis
}
